import React from "react";
import { useLocation, useSearchParams, useNavigate } from "react-router-dom";
import { NavBar, Collapse, Tag, List } from "antd-mobile";
import styles from "./detail.module.css";
import { AntOutline } from "antd-mobile-icons";

function Index() {
  const navigate = useNavigate();
  const { state } = useLocation();
  const [sp] = useSearchParams();
  const start = sp.get("start");
  const end = sp.get("end");

  const sitList = ["经济舱", "商务舱", "头等舱"];
  const sitPrices = [
    state.lps[0].atp,
    state.lps[0].atp * 2,
    state.lps[0].atp * 3,
  ];

  const handelToOrder = () => {
    navigate(`/order?start=${start}&end=${end}`, { state: state });
  };

  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>
        <span>{start}</span>
        <span>➡️</span>
        <span>{end}</span>
      </NavBar>
      <div className={styles.list}>
        <div className={styles.listItem}>
          <div className={styles.listHeader}>
            <div className={styles.itemLeft}>
              <div>
                <p>{state.dst}</p>
                <p>
                  {state.dasn} {state.dat}
                </p>
              </div>
              <div style={{ margin: "0 10px" }}>
                <AntOutline fontSize={30} />
              </div>
              <div>
                <p>{state.ast}</p>
                <p>
                  {state.aasn} {state.aat}
                </p>
              </div>
            </div>
            <div className={styles.itemRight}>￥{state.lps[0].atp}</div>
          </div>
          <div className={styles.listParams}>
            <span>{state.ss[0].asn}</span> | <span>{state.ss[0].amn}</span>
          </div>
        </div>
      </div>
      <div>
        <Collapse
          accordion
          arrowIcon={(active) =>
            active ? (
              <Tag color="warning">收起</Tag>
            ) : (
              <Tag color="warning">预定</Tag>
            )
          }
        >
          {sitList.map((item, index) => (
            <Collapse.Panel key={index} title={`${item} ${sitPrices[index]}`}>
              <List>
                <List.Item
                  arrowIcon={
                    <Tag
                      color="orange"
                      fill="outline"
                      onClick={() => handelToOrder()}
                    >
                      买票
                    </Tag>
                  }
                  description={<span>含40元出行保障 快速出票 迅捷无忧</span>}
                >
                  快速预订
                </List.Item>
                <List.Item
                  arrowIcon={
                    <Tag
                      color="orange"
                      fill="outline"
                      onClick={() => handelToOrder()}
                    >
                      买票
                    </Tag>
                  }
                  description={<span>出票较慢，高峰期需要排队</span>}
                >
                  普通预订
                </List.Item>
              </List>
            </Collapse.Panel>
          ))}
        </Collapse>
      </div>
    </div>
  );
}

export default Index;
